<template>
  <div class="chart-container">
    <el-row :gutter="20">
      <el-col :span="8" v-for="(item, index) in list" :key="index">
        <el-card :body-style="cardBodyStyle">
          <router-link
            v-if="noId"
            class="title"
            :to="{ name: 'that_front_overview', params: { id: item.id } }"
            style="display:block;">
            {{ item.name }}
          </router-link>
          <router-link
            v-else
            class="title"
            :to="{ name: 'stationOverview', params: { id: item.id } }"
            style="display:block;">
            {{ item.name }}
          </router-link>
          <div class="card-content">
            <router-link
              v-if="noId"
              class="img-a"
              :to="{ name: 'that_front_overview', params: { id: item.id } }"
              style="display:block;">
              <img
                style="border:0px;max-height: 170px;"
                :src="item.pictures"
                width="100%"
                id="img_2"
              />
            </router-link>
            <router-link
              v-else
              class="img-a"
              :to="{ name: 'stationOverview', params: { id: item.id } }"
              style="display:block;">
              <img
                style="border:0px;max-height: 170px;"
                :src="item.pictures"
                width="100%"
                id="img_2"
              />
            </router-link>
            <table class="table">
              <tbody>
                <tr>
                  <td class="lert">{{$t('nEQtz7kKVBcFDpDn0iiYf')}}：</td>
                  <td>
                    <label id="lbl_Capacity_2"
                      >{{
                        parseFloat(item.scale || 0).toFixed(2)
                      }}kW</label
                    >
                  </td>
                </tr>
                <tr></tr>
                <tr>
                  <td class="lert">{{$t('sgO8XTrpDs0hVu2JOZPmp')}}：</td>
                  <td>
                    <label id="lbl_Electric_2"
                      >{{
                        parseFloat(item.ToDayElectric || 0).toFixed(2)
                      }}kWh</label
                    >
                  </td>
                </tr>
                <tr>
                  <td class="lert">{{$t('6LCOzdrU5sddtGNODX6zu')}}：</td>
                  <td>
                    <label id="lbl_AppElectric_2"
                      >{{
                        parseFloat(item.AppToDayElectric || 0).toFixed(2)
                      }}kWh</label
                    >
                  </td>
                </tr>
                <tr>
                  <td class="lert">{{$t('MV-P1vHjPXG7_m9z2N7Zk')}}：</td>
                  <td>
                    <label id="lbl_PileCount_2">{{
                      item.Agent_PileCount || 0
                    }}</label>
                  </td>
                </tr>
                <tr>
                  <td class="lert">{{$t('APrvYpi7foB2h62_5DP0q')}}：</td>
                  <td>
                    <label id="lbl_online_2">{{ item.onlineTotal || 0 }}</label>
                  </td>
                </tr>
                <tr>
                  <td class="lert">{{$t('LdhLANFGmrEcJf8T58SHZ')}}：</td>
                  <td>
                    <label id="lbl_ChargingTotal_2">{{
                      item.ChargingTotal || 0
                    }}</label>
                  </td>
                </tr>
                <tr>
                  <td class="lert">{{$t('L2UZuJOPtG2otWb2Y2aQF')}}：</td>
                  <td>
                    <label id="lbl_fault_2">{{ item.faultTotal || 0 }}</label>
                  </td>
                </tr>
                <tr>
                  <td class="lert">{{$t('jrkZ2Urg4M1yD_4FI3wuo')}}：</td>
                  <td>
                    <label id="lbl_Time_2">{{ item.UpdateTime || 0 }}</label>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import { assign } from 'lodash'
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers('agent')
export default {
  name: 'startpage-chart',
  data () {
    return {
      cardBodyStyle: {
        backgroundColor: '#EDEDED',
        padding: '15px',
        overflow: 'hidden'
      }
    }
  },
  computed: {
    ...mapState(['allAgents', 'allStations']),
    noId () {
      return _.isNil(this.$route.params.id)
    },
    list () {
      const { params } = this.$route
      if (params.id) {
        return this.allStations.map(station => {
          return assign({}, station, {
            pictures: 'http://123.sse-china.com:8880/upLoad_Img/2019061808482908636.jpg'
          })
        })
      } else {
        return this.allAgents.map(agent => {
          return assign({}, agent, {
            pictures: 'http://123.sse-china.com:8880/upLoad_Img/2019061808482908636.jpg'
          })
        })
      }
    }
  },
  methods: {}
}
</script>

<style lang="stylus" scoped>
.el-col
  margin 15px 0
.title
  padding 10px 0
.card-content
  width 100%
  .img-a
    float left
    width 30%
    overflow hidden
  .table
    float right
    width 70%
    .lert
      text-align right
</style>
